<template>
  <div class='prompt'>
    <transition>
      <div class="prompt-message cover" v-if="prompt.hidden">
        <div class='promot-wrap' @click="clickBtn">
          <h3>基本情况</h3>
          <div class='top'>
            <div class='base-info'>
              <p class="line w50">
                <em>姓名:</em>
                <span>{{ prompt.studentname || "----" }}</span>
              </p>

              <p class="line w50">
                <em>性别:</em>
                <span>{{ prompt.studentsex || "----" }}</span>
              </p>

              <p class="line w50">
                <em>专业:</em>
                <span>{{ prompt.spename || "----" }}</span>
              </p>

              <p class="line w50">
                <em>班级:</em>
                <span>{{ prompt.classname || "----" }}</span>
              </p>
            </div>
          </div>
          <div class='info'>
            <p class="line">
              <em>身份证:</em>
              <span>{{ prompt.idcard || "----" }}</span>
            </p>
            
            <p class='line'>
              <em>手机:</em>
              <span>{{ prompt.studentnumber || "130------09" }}</span>
            </p>

             <p class="line">
              <em>地址:</em>
              <span>{{ prompt.address || "----" }}</span>
            </p>

            <p class="line">
              <em>宿舍:</em>
              <span>{{ prompt.dormitory || "----" }}</span>
            </p>
          </div>

          <div class='other' style='margin-top: 10px'>
            <h3>其他杂七杂八的信息</h3>
            <p class="line">
              <em>age:</em>
              <span>{{ prompt.age || "age" }}</span>
            </p>

            <p class="line">
              <em>dormitorygrade:</em>
              <span>{{ prompt.dormitorygrade || "dormitorygrade" }}</span>
            </p>

            <p class="line">
              <em>sick:</em>
              <span>{{ prompt.sick || "sick" }}</span>
            </p>

            <p class="line">
              <em>prove:</em>
              <span>{{ prompt.prove || "prove" }}</span>
            </p>

            <p class="line">
              <em>insurance:</em>
              <span>{{ prompt.insurance || "insurance" }}</span>
            </p>

            <p class="line">
              <em>report:</em>
              <span>{{ prompt.report || "report" }}</span>
            </p>

            <p class="line">
              <em>studentid:</em>
              <span>{{ prompt.studentid || "studentid" }}</span>
            </p>
          </div>
          <!-- <p class="line">
            <em>姓名:</em>
            <span>{{ prompt.studentname ||  }}</span>
          </p>

          <p class="line">
            <em>身份证:</em>
            <span>{{ prompt.idcard || '4598' }}</span>
          </p>

          <p class="line w50">
            <em>专业:</em>
            <span>{{ prompt.spename ||  }}</span>
          </p>

          <p class="line w50">
            <em>班级:</em>
            <span>{{ prompt.classname ||  }}</span>
          </p>

          <p class="line w50">
            <em>age:</em>
            <span>{{ prompt.age ||  }}</span>
          </p>

          <p class="line w50">
            <em>性别:</em>
            <span>{{ prompt.studentsex ||  }}</span>
          </p>

          <p class="line">
            <em>宿舍:</em>
            <span>{{ prompt.dormitory ||  }}</span>
          </p>

          <p class='btn-wrap' @click='clickBtn'>
            <Button type='success'>看完了吗</Button>
          </p> -->
        </div>
      </div>
    </transition>

    <Spin size="large" class='cover' fix v-show="prompt.loading"></Spin>
  </div>
</template>
<script>
export default {
  name: 'Prompt',
  props: {
    prompt: {
      type: Object,
      default: {
        hidden   : false,
        loading  : false
      }
    }
  },
  methods: {
    clickBtn() {
      this.$emit('close')
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"
      
  .cover
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    position: absolute
    z-index: 999999999
    left: 0
    right: 0
    top: 0
    bottom: 0
    border: 1px solid rgba(0,0,0,.05)
    h3
       position: relative
       height: 40px
       line-height: 40px
       padding-left: 12px
       font-size: 20px
       margin-bottom: 5px
       color: #000
       &:after
         content:''
         position: absolute
         left: 0px
         top: 10px
         bottom: 10px
         width: 4px
         background-color: #f0f
    .promot-wrap
      position: absolute
      left: 40px
      right: 40px
      padding: 10px
      box-shadow: 2px 2px 15px 0 rgba(50,50,50,.2)
      cursor: pointer
      .top
        display: flex
        padding-bottom: 10px
        .base-info
          flex: 1
          display: flex
          align-items: center
          flex-wrap: wrap
          font-size: 0
  .line
    hh(26px)
    width: 100%   
    white-space: nowrap
    overflow: hidden
    color: #888
    em
      font-size: 15px
      color: #000
      width: 60px   
    &.w50
      display: inline-block
      width: 50%
      font-size: 14px 
  .btn-wrap
    padding: 20px 0 10px
    text-align: center    
  
  .move-enter-active, .move-leave-active
    transiti(all, 0.4s, ease)
  .move-enter
    transform: translate3d(100%, 0, 0)
  .move-leave
    transform: translate3d(0, 0, 0)
</style>